<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @addTask="addFn" :list="list"></TodoHeader>
    <TodoMain :list="showlist"
    @delTask="delFn"
    ></TodoMain>
    <TodoFooter :type="type" @changeType="changeFn" @removeFinished="removeFn"></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
    
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";


export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem("todolist")),//从本地取出数据
      type : 'all'
    };
  },
  methods: {
    // 添加事件，判断输入是否为空，将数据push到list中，任务名称从子组件接受
    addFn(task){
      if(task.trim() === ""){
        alert('输入不能为空哦')
        return
    }else{
      this.list.push({
        id : this.list.length?this.list.at(-1).id+1:100,
        name : task,
        isDone : false
      })
    }
  },
  //子组件中点击按钮触发改变类型事件，将所点按钮的标识传递来当参数。点击哪个按钮type就是什么类型
  // 然后根据这个类型可以展示list不同的样式
   changeFn(a){
    this.type=a
   },
  // 删除事件，从子组件获取点击的li的id，遍历数组，筛除点击的那一项
  delFn(id){
    this.list=this.list.filter(item=>item.id!==id)
  },
  removeFn(){
    this.list=this.list.filter(item=>!item.isDone)
  }
},
//根据type变化触发，根据type的类型提供不同的list
computed: {
  showlist(){
    if(this.type ==="yes"){
      return this.list.filter(item => item.isDone)
    }else if(this.type ==="no"){
      return this.list.filter(item => !item.isDone)
  }else{return this.list}
}
},
//当list数组发生改变时，将新数组存储到本地
watch: {
  list:{
    deep: true,
    handler(){
      localStorage.setItem("todolist", JSON.stringify(this.list))
    }
  }
}
}
</script>